<template>
  <div>
    <!--整个容器-->
    <el-container>
      <!--容器头-->
      <el-header class="layout-header">
        <div><img class="layout-img" src="../assets/tubiao.png" /></div>
          <span class="layout-span1">当前日期为：{{ nowTime }}</span><br />
        <span class="layout-span2">
          <a href="http://mail.ai-yyy.com/">邮箱入口</a> |
          <a href="http://oa.ai-yyy.com:8010/eoffice10/client/web/login">OA入口</a> |
          <a href="http://%20oa.ai-yyy.com/">B2B入口</a>
        </span>
        <div id="layout-body-nav">
          <div id="layout-nav">
          <el-menu
            :router=true
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#222"
            text-color="#fff"
            active-text-color= "#fff">
          <el-menu-item index="/product/index">首页</el-menu-item>
          <el-menu-item index="/product/about">关于我们</el-menu-item>
          <el-menu-item index="/product/solution">解决方案</el-menu-item>
          <el-menu-item index="/product/support">服务支持</el-menu-item>
          <el-menu-item index="/product/news">新闻咨询</el-menu-item>
          <el-menu-item index="/product/contact">联系我们</el-menu-item>
        </el-menu>
        </div>
        </div>
      </el-header>
      <!--容器主体-->
      <el-main class="layout-body">
        <router-view/>
      </el-main>
      <!--容器脚-->
      <el-footer class="layout-footer">
        <p><font face="Arial">©</font>2020 合肥优逸云科技有限公司 版权所有　</p>
        <span>备案号: </span><span style="text-decoration: underline;">皖ICP备18013779号</span><br />
        <span>技术支持: 合肥优逸云科技有限公司</span>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '',
      timer: undefined,
      nowTime: new Date(),
    };
  },


  methods: {
    handleActiveMenuItem() {
      let currentPath = this.$router.currentRoute.path;
      if (currentPath.startsWith('/sys-admin/product/album')){
        currentPath = '/sys-admin/product/album';
      }
      this.activeIndex = currentPath;
    }
  },
  mounted() {
    this.handleActiveMenuItem();
  },


  formatTime(n) {
    //判断时间是否需要加0
    if (n < 10) {
      return "0" + n;
    } else {
      return n;
    }
  },

  created() {
    //时间1方法
    // 要显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值开启定时
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
  },
  // 关闭页面销毁定时器

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }

  },


}
</script>

<style scoped>
.el-menu, .el-menu-item, .el-submenu__title {
  border-bottom: none !important;
}

.el-menu-item.is-active{
  background: #0e05c1 !important;
}

.layout-header {
  height: 160px !important;
  padding: 0 !important;
  position: relative;
}
#layout-body-nav {
  width:100%;
  height: 61px;
  background-color: #222222;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
}
#layout-nav {
  width: 592px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.layout-header .el-menu-item {
  font-size: 16px;
}
.layout-header .el-menu-item a {
  text-decoration: none;
}
.layout-header .layout-img {
  width: 200px;
  height: 50px;
  float: left;
  margin: 25px 0 0 100px;
}
.layout-header span {
  display: inline-block;
  position: relative;
  top: 25px;
  right: -300px;
}
.layout-header .layout-span2 {
  font-size: 14px;
  margin-top: 10px;
}
.layout-body {
  padding: 0 !important;
}
.layout-footer {
  height: 100px !important;
  padding: 0 !important;
  font-size: 14px;
  color: #8b939e;
  background-color: #222;
}
.layout-footer p {
  margin-top: 15px;
}
</style>


